<template>
    <el-container>
        <el-main class="popup_content">
            <el-form ref="editPromotion" :model="editPromotion" :rules="rules" label-width="90px">
                <el-form-item label="活动商品" prop="goodsId">
                    <!-- <el-select v-model="productsName" clearable style="width:400px" value-key="goodsId" @change="productsChange" placeholder="请选择商品" filterable :filter-method="getProductList">
                        <el-option v-for="item in productOptions" :label="item.name" :value="item" />
                    </el-select> -->
                    <product-choose style="width:400px;" :data="productsName" @chooseProduct="chooseProduct"></product-choose>
                </el-form-item>
                <el-form-item label="活动描述" prop="title">
                    <el-input style="width:400px" v-model="editPromotion.title" placeholder="如消费满100元生效"></el-input>
                </el-form-item>
                <el-form-item label="起止日期" prop="dateTime">
                    <el-date-picker v-model="editPromotion.dateTime" style="width:400px" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item :label="editPromotion.type|watchMinimumPrice" prop="minimumPrice" v-if="editPromotion.type===7">
                    <el-input style="width:200px" v-model="editPromotion.minimumPrice" @mousewheel.native.prevent @DOMMouseScroll.native.prevent type="number" placeholder="如消费满100元生效"></el-input>
                </el-form-item>
                <el-form-item :label="editPromotion.type|watchlabeltype " prop="amount" v-if="editPromotion.type===8||editPromotion.type===7||editPromotion.type===10">
                    <el-input style="width:200px" v-model="editPromotion.amount" @mousewheel.native.prevent @DOMMouseScroll.native.prevent type="number" placeholder="请输入金额"></el-input>
                </el-form-item>
                <div style="display: flex">
                    <el-form-item label="商品库存" prop="stock">
                        <el-input style="width:200px" type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent v-model="editPromotion.stock" placeholder="请输入库存"></el-input>
                    </el-form-item>
                    <el-form-item label="" prop="firsted" style="width:300px">
                        <el-checkbox v-model="editPromotion.firsted">只适用于首单生效</el-checkbox>
                    </el-form-item>
                </div>
                <div>
                    <el-form-item label="参与会员">
                        <el-select v-model="vipsvalue" style="width:400px" multiple filterable allow-create default-first-optionplaceholder="请选择可参与会员" @change="vipschanges">
                            <el-option v-for="item in vipslist" :key="item.id" :label="item.name" :value="item.vip"></el-option>
                        </el-select>
                    </el-form-item>

                </div>
                <div>
                    <el-form-item label="参与城市">
                        <queryCascader style="width:400px" @queryCascaderclick=queryCascaderclick :areaList='editPromotion.areaList'></queryCascader>
                    </el-form-item>
                </div>

                <el-form-item>
                    <el-col :span="12">
                        <el-button type="primary" :loading="clicked" @click="updatePromotion('editPromotion')">确 定</el-button>
                    </el-col>
                </el-form-item>
            </el-form>

        </el-main>
    </el-container>
</template>

<script>
import queryCascader from "@/components/Query/queryCascader";
import { EventBus } from "@/api/eventBus";
import { find, update } from "@/api/promotion";
import { list as productList } from "@/api/product";
import { list } from "@/api/vip";
import productChoose from "../components/product.vue"
export default {
    name: "seckill-edit",
    data() {
        return {
            vipsvalue: [],
            vipslist: [],
            products: [],
            clicked: false,
            giftTypeList: [],
            productOptions: [],
            productsName: "",
            editPromotion: {
                dateTime: [],
                id: "",
                givenAmount: 0,
                agioRate: 0,
                amount: 0,
                firsted: false,
                goodsId: "",
                giftType: "",
                gifts: [
                    {
                        promotionId: "",
                        giftId: "",
                        availableQuantity: 0,
                        giftName: "",
                        quantity: 0,
                    },
                ],
                introduction: "",
                minimumPrice: 0,
                modifyDate: "",
                orders: 0,
                stock: 0,
                overlying: false,
                thumbnail: "",
                title: "",
                type: 8,
                areaList: "",
            },
            rules: {
                type: [
                    {
                        required: true,
                        message: "请输入选择类型",
                        trigger: "change",
                    },
                ],
                agioRate: [
                    {
                        required: true,
                        message: "请输入满减比例",
                        trigger: "blur",
                    },
                ],
                amount: [
                    { required: true, message: "请输入金额", trigger: "blur" },
                ],
                goodsId: [
                    {
                        required: true,
                        message: "请选择促销商品",
                        trigger: "change",
                    },
                ],
                quantity: [
                    { required: true, message: "请输入数量", trigger: "blur" },
                ],
                minimumPrice: [
                    { required: true, message: "请输入数量", trigger: "blur" },
                ],
                dateTime: [
                    {
                        required: true,
                        message: "请输入活动日期",
                        trigger: "change",
                    },
                ],
                integer: [
                    {
                        required: true,
                        message: "请输入优先级",
                        trigger: "blur",
                    },
                ],
                introduction: [
                    {
                        required: true,
                        message: "请输入促销说明",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    components: {
        queryCascader,
        productChoose
    },
    watch: {
        // 路由地址不变的情况下,如果id变化则重新获取数据
        $route(newVal, oldVal) {
            console.log(newVal);
            if (newVal.name == "seckill-edit" && newVal.query.id != this.id) {
                this.findPromotion();
            }
        },
    },
    methods: {
        queryCascaderclick(data) {
            this.editPromotion.areaList = data;
        },
        vipschanges(val) {
            this.editPromotion.vips = "";
            val.forEach((item) => {
                this.editPromotion.vips += item;
            });
        },
        loadVip() {
            list().then((res) => {
                console.log(res);
                this.vipslist = res.data.data;
            });
        },
        findPromotion() {
            var _this = this;
            this.editPromotion.id = this.$route.query.id;
            find(this.editPromotion.id).then((response) => {
                response.data.promotion.dateTime = [];
                response.data.promotion.dateTime.push(
                    response.data.promotion.beginDate
                );
                response.data.promotion.dateTime.push(
                    response.data.promotion.endDate
                );
                this.editPromotion = response.data.promotion;

                this.productsName = response.data.promotion.productName;

                console.log(this.editPromotion);
                this.vipsvalue = this.editPromotion.vips.split("");
                let array = [];
                this.vipsvalue.forEach((item) => {
                    array.push(Number(item));
                });
                this.vipsvalue = array;
            });
        },
        getProductList(query) {
            // 加载商品
            productList({ keyword: query, pageSize: 20, isList: true })
                .then((res) => {
                    this.$set(this.$data, "productOptions", res.data.data);
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        updatePromotion(editPromotion) {
            this.$refs[editPromotion].validate((valid) => {
                if (valid) {
                    this.clicked = true;
                    var editPromotion = {
                        id: this.editPromotion.id,
                        agioRate: this.editPromotion.agioRate,
                        amount: this.editPromotion.amount,
                        firsted: this.editPromotion.firsted,
                        giftType: this.editPromotion.giftType,
                        gifts: [],
                        beginDate: "",
                        endDate: "",
                        status: 0,
                        goodsId: this.editPromotion.goodsId,
                        introduction: this.editPromotion.introduction,
                        minimumPrice: this.editPromotion.minimumPrice,
                        modifyDate: new Date(),
                        orders: this.editPromotion.orders,
                        overlying: this.editPromotion.overlying,
                        thumbnail: this.editPromotion.thumbnail,
                        title: this.editPromotion.title,
                        type: this.editPromotion.type,
                        stock: this.editPromotion.stock,
                        vips: this.editPromotion.vips,
                        areaList: this.editPromotion.areaList,
                    };
                    editPromotion.gifts = this.giftTypeList;
                    if (this.editPromotion.dateTime.length > 0) {
                        editPromotion.beginDate =
                            this.editPromotion.dateTime[0];
                        editPromotion.endDate = this.editPromotion.dateTime[1];
                    }
                    if (this.editPromotion.type == 11) {
                        editPromotion.gifts = this.$refs.editCouponAdd.coupons;
                        editPromotion.giftType = 1;
                    }

                    update(editPromotion)
                        .then((response) => {
                            this.$store
                                .dispatch("tagsView/delView", this.$route)
                                .then(({ visitedViews }) => {
                                    this.$router.push({
                                        path: "/seckill/list",
                                    });
                                });
                            this.clicked = false;
                            EventBus.$emit("seckill-edit", response.data);
                        })
                        .catch((error) => {
                            this.clicked = false;
                            console.log("error");
                        });
                }
            });
        },
        productsChange(val) {
            console.log(val);
            this.editPromotion.goodsId = val.goodsId;
        },
        chooseProduct(data){
            console.log('1121212')
            this.editPromotion.goodsId = data.goodsId;
            this.productName = data.name;
        },
    },
    created() {
        this.loadVip();
        this.findPromotion();
        this.getProductList("");
    },
    filters: {
        watchType(val) {
            if (val === 7) {
                return "买送";
            } else if (val === 8) {
                return "秒杀";
            } else if (val === 9) {
                return "第二件半价";
            } else if (val === 10) {
                return "新人价";
            } else if (val === 11) {
                return "买赠";
            }
        },
        watchMinimumPrice(val) {
            if (val == 7) {
                return "购买数量";
            }
        },
        watchlabeltype(val) {
            if (val === 7) {
                return "赠送数量";
            } else if (val === 8) {
                return "折扣价格";
            } else if (val === 10) {
                return "新人价";
            }
        },
    },
};
</script>

<style scoped>
</style>
